<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
function toSendEmail() {
  uni.navigateTo({
    url: '/pages/common/sendEmail',
  })
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden bg-white">
    <wd-navbar
      custom-class="!bg-transparent"
      left-arrow
      title="点餐二维码设置"
      left-text="返回"
      :bordered="false"
      @click-left="handleClickLeft"
    />
    <view class="top-bar h-[210px]">
      <view class="absolute bottom-4 flex flex-col px-[20px]">
        <wd-text text="桌台二维码" size="20px" color="#fff" />
        <wd-text
          text="请将桌台二维码贴在桌台/台牌上，顾客扫桌码下单，商家送餐到桌"
          class="mt-2"
          size="14px"
          color="#fff"
        />
      </view>
    </view>
    <view class="flex flex-col px-4 py-10">
      <wd-text text="没有实体码？" size="18px" color="#333">
        <template #prefix>
          <view class="mr-2 inline-block h-[16px] w-[2px] bg-primary" />
        </template>
        <template #suffix>
          <wd-text text="请添加桌台后，下载并制作桌台码" size="14px" color="#333" />
        </template>
      </wd-text>
      <wd-text text="普通桌台二维码" color="#333" size="14px" class="mt-4" />
      <wd-text text="顾客扫码后直接进入点餐流程，不引导关注公众号" size="14px" class="mt-4" />
      <view class="mt-4">
        <wd-button size="small" type="primary" :round="false" @click="toSendEmail">
          发送到邮箱
        </wd-button>
        <wd-button size="small" type="primary" :round="false" class="ml-4">下载到手机</wd-button>
      </view>
      <wd-text text="已有实体码？" size="18px" color="#333" class="mt-10">
        <template #prefix>
          <view class="mr-2 inline-block h-[16px] w-[2px] bg-primary" />
        </template>
        <template #suffix>
          <wd-text text="请绑定桌台" size="14px" color="#333" />
        </template>
      </wd-text>
      <wd-text text="点击“立即绑定”，选择桌台，扫描要绑定的实体码即可" size="14px" class="mt-4" />
      <view class="mt-4">
        <wd-button size="small" type="primary" :round="false">立即绑定</wd-button>
      </view>
      <wd-text text="需要解绑实体码？" size="18px" color="#333" class="mt-10">
        <template #prefix>
          <view class="mr-2 inline-block h-[16px] w-[2px] bg-primary" />
        </template>
      </wd-text>
      <wd-text text="点击“解绑绑定码”，扫描要接触绑定的桌台码即可" size="14px" class="mt-4" />
      <view class="mt-4">
        <wd-button size="small" type="primary" :round="false">解绑桌台码</wd-button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.top-bar {
  position: relative;
  background: url('@/static/demo.png') no-repeat;
  background-size: cover;
}
</style>
